<template>
  <div slot="header" class="container-header large">
    <Form class="search">
      <Row>
        <i-col span="8">
          <FormItem label="手机号">
            <Input v-model.trim="list.form.contactMobile" placeholder="输入联系人手机号" @on-enter="onSearchBtnClick" />
          </FormItem>
          <FormItem label="部门选择">
            <Cascader
              v-model="value"
              :data="departmentTree"
              :change-on-select="true"
              placeholder="请选择地区"
              @on-change="onSelectDpt"
            />
          </FormItem>
        </i-col>
        <i-col span="8">
          <FormItem label="联系人">
            <Input v-model.trim="list.form.contactName" placeholder="输入联系人" @on-enter="onSearchBtnClick" /></Input>
          </FormItem>
          <FormItem label="经销商选择">
            <Select ref="select" v-model="list.form.distributorId" clearable filterable remote :remote-method="getAllPrizes" :loading="distributorSearchLoading" @on-query-change="onQueryChange">
              <Option v-for="item in prizeList" :key="item.id" :value="item.id">{{ item.name }}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="签约品牌">
            <Select v-model="list.form.brandId" clearable @on-change="onSearchBtnClick">
              <Option v-for="(item, index) of brandList" :key="index" :value="item.brandId">{{ item.brandName }}</Option>
            </Select>
          </FormItem>

        </i-col>
        <i-col class-name="search" span="2">
          <Button class="btn-search large" type="primary" icon="ios-search" @click="onSearchBtnClick" />
        </i-col>
      </Row>
    </Form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { debounce } from '@/util.js'
export default {
  components: {
  },
  props: {
    list: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      currValue: [],
      departmentTree: [],
      prizeList: [],
      distributorSearchLoading: false
    }
  },
  computed: {
    ...mapGetters([
      'brandList'
    ])
  },
  mounted () {
    this.getDptTree()
    this.$store.dispatch('getBrandList')
    this.getAllPrizes()
  },
  methods: {
    onSearchBtnClick () {
      this.$emit('onSearchBtnClick')
    },
    getDptTree () {
      this.$jsonPost('department/listDepartmentTree').then(res => {
        const func = (arr) => {
          arr.forEach(item => {
            item.label = item.name
            item.value = item.id
            if (item.children && item.children.length) {
              func(item.children)
            }
          })
        }
        func(res)
        this.departmentTree = res
      })
    },
    onSelectDpt (val) {
      let [d, a] = val
      this.list.form.officeId = d
      this.list.form.departmentId = a
      this.getAllPrizes()
    },
    getAllPrizes (query) {
      this.distributorSearchLoading = true
      let param = {
        keyword: query,
        departId: this.list.form.departmentId ? this.list.form.departmentId : this.list.form.officeId
      }
      this.$jsonPost('/department/queryDistributorDepartment', param).then(data => {
        this.distributorSearchLoading = false
        this.prizeList = (data.records || []).map(item => {
          return {
            id: item.distributorId,
            name: item.distributorName
          }
        })
      }).catch(() => {
        this.distributorSearchLoading = false
      })
    },
    onQueryChange: debounce(function (query) {
      this.getAllPrizes(query)
    }, 1000)
  }
}
</script>
